import React from 'react';
import {
  AppBar,
  Toolbar,
  Typography,
  Box,
  IconButton,
  Tooltip,
} from '@mui/material';
import {
  VideoCall,
  Home,
  Info,
} from '@mui/icons-material';
import { useNavigate, useLocation } from 'react-router-dom';

const Header: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const handleHomeClick = () => {
    navigate('/');
  };

  const handleInfoClick = () => {
    // 可以打开帮助或关于页面
    console.log('显示应用信息');
  };

  const isRoomPage = location.pathname.startsWith('/room/');

  return (
    <AppBar position="static" elevation={1}>
      <Toolbar>
        {/* Logo 和标题 */}
        <Box sx={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}>
          <VideoCall sx={{ mr: 1, fontSize: 28 }} />
          <Typography
            variant="h6"
            component="div"
            sx={{
              fontWeight: 600,
              cursor: 'pointer',
            }}
            onClick={handleHomeClick}
          >
            FaceTime
          </Typography>
        </Box>

        {/* 导航按钮 */}
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          {isRoomPage && (
            <Tooltip title="返回首页">
              <IconButton
                color="inherit"
                onClick={handleHomeClick}
                sx={{
                  '&:hover': {
                    backgroundColor: 'rgba(255, 255, 255, 0.1)',
                  },
                }}
              >
                <Home />
              </IconButton>
            </Tooltip>
          )}

          <Tooltip title="关于">
            <IconButton
              color="inherit"
              onClick={handleInfoClick}
              sx={{
                '&:hover': {
                  backgroundColor: 'rgba(255, 255, 255, 0.1)',
                },
              }}
            >
              <Info />
            </IconButton>
          </Tooltip>
        </Box>
      </Toolbar>
    </AppBar>
  );
};

export default Header;